<template>
  <el-row v-loading="loading">
    <el-col :span="24">
      <el-row class="search-row">
        <el-col :span="12">
          <el-input placeholder="档案号/姓名/手机号" size="small" v-model="like1" style="width: 260px;">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
          <div style="height: 30px;">
          </div>
        </el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button type="primary" icon="el-icon-plus" size="small" @click="addOrder">新增</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table :data="findOrder().slice((pageNum-1)*pageSize,pageNum*pageSize)" border size="mini" header-cell-class-name="header-row">
            <el-table-column prop="orderDate" label="预约日期" header-align="center" align="center"></el-table-column>
            <el-table-column prop="tMember.fileNumber" label="档案号" header-align="center" align="center"></el-table-column>
            <el-table-column prop="tMember.name" label="姓名" header-align="center" align="center"></el-table-column>
            <el-table-column prop="tMember.idCard" label="身份证号码" header-align="center" align="center" width="150"></el-table-column>
            <el-table-column prop="tMember.phoneNumber" label="手机号码" header-align="center" align="center"></el-table-column>
            <el-table-column prop="tSetmeal.tname" label="套餐名称" header-align="center" align="center"></el-table-column>
            <el-table-column prop="orderType" label="预约类型" header-align="center" align="center"></el-table-column>
            <el-table-column prop="orderStatus" label="预约状态" header-align="center" align="center"></el-table-column>
            <el-table-column label="操作" header-align="center" align="center" width="290">
              <template slot-scope="scope">
                <el-button type="primary" size="mini"
                v-if="scope.row.orderStatus=='未到诊'"
                  @click="querenyuyue(scope.row)">确认预约</el-button>
                <el-button  type="danger" size="mini"
                v-if="scope.row.orderStatus=='已到诊'"
                  @click="quxiaoyuyue(scope.row)">取消预约</el-button>
                <el-button  type="success" size="mini"
                   @click="yuyuetaocan(scope.row)">修改预约</el-button>
              </template>
            </el-table-column>
        </el-table>
        </el-col>
        <el-col :span="24">
          <el-pagination
            background
            @size-change="handleSizeChange"
            :current-page.sync="pageNum"
            :page-sizes="[2,4,6,8]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="findOrder().length">
          </el-pagination>
          <el-dialog :title="title" :visible.sync="dialogTransferVisible">
            <div>
              <label>预约日期:</label>
              <el-input size="small" v-model="yydate" style="width: 150px;" type="date"/>
            </div>
            <div style="height: 20px;">
          </div>
            <el-transfer
              filterable
              :filter-method="filterMethod"
              filter-placeholder="请输入套餐名称"
              v-model="value"
              :data="tcs"
              @change="getTaoCan"
              :right-default-checked='tcids'>
            </el-transfer>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogTransferVisible = false">取 消</el-button>
              <el-button type="primary" @click="qd">确 定</el-button>
            </div>
          </el-dialog>

          <el-dialog :title="title" :visible.sync="dialogTransferVisible2">
            <el-row class="search-row">
              <el-col :span="12">
                <el-input placeholder="姓名/身份证号码" size="small" v-model="like2" style="width: 260px;">
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
                <div style="height: 30px;">
                </div>
              </el-col>
              <el-col :span="24">
              <el-table :data="findHy().slice((pageNum2-1)*pageSize2,pageNum2*pageSize2)" border size="mini" header-cell-class-name="header-row">
                <el-table-column prop="fileNumber" label="档案号" header-align="center" align="center"></el-table-column>
                <el-table-column prop="name" label="姓名" header-align="center" align="center"></el-table-column>
                <el-table-column prop="idCard" label="身份证号码" header-align="center" align="center"></el-table-column>
                <el-table-column prop="phoneNumber" label="手机号码" header-align="center" align="center"></el-table-column>
                <el-table-column prop="sex" label="性别" header-align="center" align="center"></el-table-column>
                <el-table-column label="操作" header-align="center" align="center">
                  <template slot-scope="scope">
                    <el-button type="primary" size="mini"
                      @click="addyuyue(scope.row)">预约</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
            <el-col :span="24">
               <el-pagination
                 background
                @size-change="handleSizeChange2"
                :current-page.sync="pageNum2"
                 :page-sizes="[2,4,6,8]"
                 :page-size="pageSize2"
                 layout="total, sizes, prev, pager, next, jumper"
                :total="findHy().length">
              </el-pagination>
            </el-col>
            </el-row>
          </el-dialog>

        </el-col>
      </el-row>
    </el-col>
  </el-row>


</template>

<script>
import { listAllOrder,yy ,yytc,isOkYy,queryOrderByHyid} from '@/api/xsxorder'
import { queryTaoCanStatue} from '@/api/xsxsetmeal'
import { listHy} from '@/api/xsxmember'
import { getHealthMgrId} from '@/api/xsxhealthmgr'

export default {
  data() {
      return {
        userId:0,
        hyList:[],
        udate:'',
        title:"预约套餐",
        yydate:'',
        tcids:[],
        changeTaocan:[],
        yyid:0,
        dialogTransferVisible:false,
        dialogTransferVisible2:false,
        orderList:[],
        taocanList:[],
        loading: false,
        like1:"",
        like2:"",
        pageSize:4,//每页显示的条数
        pageNum:1,
        pageSize2:6,//每页显示的条数
        pageNum2:1,
        tcs:[],
        value: []
      };
  },
  methods: {
    handleSizeChange2(val){
      this.pageSize2 = val;
    },
    handleSizeChange(val) {
     this.pageSize = val;
    },
    async pageInit() {
      let userid=JSON.parse(sessionStorage.getItem('currentUser')).id
      try {
        let [ttyy , tc ] = await Promise.all([
          getHealthMgrId(userid),
          queryTaoCanStatue()
        ])
        this.taocanList=tc.data
        this.userId=ttyy.data
        this.tcs=[]
        listAllOrder(this.userId).then(response => {
          this.orderList=response.data;
        })
        listHy(this.userId).then(response => {
          this.hyList=response.data
        })
        for(var i=0;i<this.taocanList.length;i++){
          this.tcs.push({
            label: this.taocanList[i].tname,
            key: this.taocanList[i].id
          });
        }
      } catch(error) {
        this.outputError(error)
      }
    },
    filterMethod(query, item) {
      return item.label.indexOf(query) > -1;
    },
    querenyuyue(row) {
      this.$confirm('是否确定预约?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          yy(0,row.id).then(response => {
            this.$message({
              type: 'success',
              message: '预约成功!'
            });
          })
          .catch(error => {
            console.log(error)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消预约'
          });
        });
    },
    quxiaoyuyue(row) {
      this.$confirm('是否取消预约?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          yy(1,row.id).then(response => {
            this.$message({
              type: 'success',
              message: '取消预约成功!'
            });
          })
          .catch(error => {
            console.log(error)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消预约失败'
          });
        });
    },
    findOrder(){
        return this.orderList.filter((item,i)=>{
          console.log(item)
          console.log(this.like1)
            if(item.tMember.fileNumber.includes(this.like1) || item.tMember.name.includes(this.like1) || item.tMember.phoneNumber.includes(this.like1)){
                return item;
            }
        })
    },
    findHy(){
      return this.hyList.filter((item,i)=>{
            if(item.idCard.includes(this.like2) || item.idCard.includes(this.like2)){
                return item;
            }
        })
    },
    getTaoCan(a){
      this.changeTaocan=a;
    },
    addOrder(){
      this.dialogTransferVisible2=true;
      this.title="预约套餐"
      this.value=[];
    },
    addyuyue(row){
      queryOrderByHyid(row.id,0).then(response => {
        if(response.data!=''){
          alert("该会员已预约，不可再预约！！")
          return;
        }else{
          this.yyid=row.id
          this.title="预约套餐"
          this.value=[];
          this.dialogTransferVisible2=false;
          this.dialogTransferVisible=true;
        }
      })
    },
    yuyuetaocan(row){
      this.title="修改预约"
      this.udate=row.orderDate
      this.value=[];
      this.value.push(row.setmealId);
      this.yyid=row.id;
      this.dialogTransferVisible=true;
    },
    getDate(){
      var dt=new Date()
      var n=dt.getFullYear();
      var y=(dt.getMonth()+1).toString().padStart(2,"0");//补零操作
      var r=(dt.getDate()).toString().padStart(2,"0");
      dt.getHours();
      dt.getMinutes();
      dt.getSeconds();
      return n+"-"+y+"-"+r;
    },
    qd(){
      if(this.getDate()>this.yydate){
        alert("不能预约当前日期之前的日期")
        return false;
      }
      if(this.changeTaocan.length>1){
        alert("只允许选择一个套餐")
        return false;
      }
      if(this.yydate==""){
        alert("预约日期不为空")
        return false;
      }
      isOkYy(this.yydate).then(response => {
        if(response.data<100){
           if(this.title=="修改预约"){
            yytc(this.yyid,this.changeTaocan[0],this.yydate,this.udate).then(response => {
              if(response.data>0){
                this.dialogTransferVisible=false
                this.pageInit()
              }
            })
          }else{
            yytc(this.yyid,this.changeTaocan[0],this.yydate,this.udate).then(response => {
              if(response.data>0){
                this.dialogTransferVisible=false
                 this.pageInit()
              }
            })
          }
        }else{
          alert("该时间预约人数已满")
          return;
        }
      })

    }
  },
  created() {
    this.pageInit()
  }
}
</script>



